<style lang="less">
@import '../less/header.less';
@import '../less/skin.less';
@import '../less/sider-menu.less';
</style>

<template>
  <header class="header {{skin.currentStyle}}">
    <top-search :search-status.sync="openSearchStatus"></top-search>
    <ul class="header-inner clearfix">
    <li class="sider_trigger"  @click="triggerClick" :class="{'open' : trigger.open}" v-if="show.triggerShow"><sider-trigger></sider-trigger></li>
      <li class="logo">
        <a href="javascript:void(0)">{{msg}}</a>
      </li>
      <li class="pull-right">
        <ul class="top-menu">
          <li id="toggle-width" v-if="show.switchShow"><switch :checked.sync="checked"></switch></li>
          <li id="top-search" v-if="show.topSearchShow">
            <a href="javascript:void(0);" @click="openSearch"><i class="glyphicon glyphicon-search" ></i></a>
          </li>
          <li :class="{'open' : dropdown.open}" v-if="show.msgShow">
            <drop-down :open.sync="dropdown.open" :lg="dropdown.lg" :pull-right="dropdown.pullRight" :items="dropdown.items" :count="dropdown.items.length">
              <i slot="icon" class="glyphicon glyphicon-comment"></i>
              <div slot="header">消息通知</div>
            </drop-down>
          </li>
          <!--<li>
            <div class="skin-switch">
              <drop-down :open.sync="skin.open" :transform="false">
                <button slot="icon" class="btn glyphicon glyphicon-tint"></button>
                <div slot="dropdown-menu">
                  <span v-for="color in skin.colors" class="ss-skin {{color}}" @click="switchSkin(color)"></span>
                </div>
              </drop-down>
            </div>-->
          </li>
        </ul>
      </li>
    </ul>

    <div v-if="show.extendsShow">
      <input-search></input-search>
      <div class="skin-switch">
        <drop-down :open.sync="skin.open" :transform="false">
          <button slot="icon" class="btn glyphicon glyphicon-tint"></button>
          <div slot="dropdown-menu">
            <span v-for="color in skin.colors" class="ss-skin {{color}}" @click="switchSkin(color)"></span>
          </div>
        </drop-down>
      </div>
    </div>

  </header>
  
  <!--<sider-menu :toggled.sync="aside.toggled" :settings="asideMenu.settings" :menus.sync="asideMenu.menus">
    <div class="profile-pic" slot="headImg">
        <img src="../../static/images/1.jpg" alt="">
    </div>
    <div class="profile-info" slot="userName">
        Malinda Hollaway
        <i class="glyphicon glyphicon-eject"></i>
    </div>
  </sider-menu>-->

   
  <div class="sidebar" :class="{'toggled' : aside.toggled}">
    <div class="sidebar-inner">    
        <vue-scrollbar :speed="80">
        <div class="profile-menu" :class="{'toggled' : asideMenu.settingShow}" @click="showUserInfo">
            <a href="javascript:void(0);">
                <div class="profile-pic">
                    <img src="../../static/images/1.jpg" alt="">
                </div>
                <div class="profile-info">
                    Malinda Hollaway
                    <i class="glyphicon glyphicon-eject"></i>
                </div>
            </a>
            <ul class="main-menu" v-show="asideMenu.settingShow">
                <tree v-for="st in asideMenu.settings" :menu.sync="st"></tree>
            </ul>
        </div>
        <ul class="main-menu">
            <tree v-for="menu in asideMenu.menus" :menu.sync="menu"></tree>
        </ul>
        <div class="clearfix"></div>
      </vue-scrollbar>
    </div>
  </div>
</template>

<script>
import SiderTrigger from './SiderTrigger'
import Switch from './Switch'
import TopSearch from './TopSearch'
import DropDown from './DropDown'
import InputSearch from './InputSearch'
import Tree from './Tree'
import VueScrollbar from './scrollbar/vue-scrollbar'

export default {
  data () {
    return {
      msg: 'Webpack Vue!',
      checked: false,
      skin: {
        open: false,
        currentStyle: 'bgm-lightblue',
        colors: ['bgm-lightblue', 'bgm-bluegray', 'bgm-cyan', 'bgm-teal', 'bgm-green', 'bgm-orange', 'bgm-blue', 'bgm-purple']
      },
      trigger: {
        open: false
      },
      show: {
        triggerShow: true,
        switchShow: true,
        topSearchShow: true,
        msgShow: true,
        extendsShow: false
      },
      openSearchStatus: false,
      dropdown: {
        open: false,
        lg: true,
        pullRight: true,
        items: [
          {src: '../static/images/1.jpg', title: 'David Belle', content: 'Cum sociis natoque penatibus et magnis dis parturient montes'},
          {src: '../static/images/2.jpg', title: 'Jonathan Morris', content: 'Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel'},
          {src: '../static/images/3.jpg', title: 'Fredric Mitchell Jr', content: 'Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies'},
          {src: '../static/images/4.jpg', title: 'Glenn Jecobs', content: 'Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque'},
          {src: '../static/images/5.jpg', title: 'Bill Phillips', content: 'Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat'}
        ]
      },
      aside: {
        toggled: false
      },
      asideMenu: {
        settingShow: false,
        settings: [
          {icon: 'glyphicon-user', name: 'View Profile'},
          {icon: 'glyphicon-info-sign', name: 'Privacy Settings'},
          {icon: 'glyphicon-cog', name: 'Settings'},
          {icon: 'glyphicon-off', name: 'Logout'}
        ],
        menus: [
          {icon: ' glyphicon-home', name: 'Home', url: '/home'},
          {icon: ' glyphicon-th-list', name: 'Tables', childMenus: [
            {name: 'Tables', url: '/tables'}, {name: 'Data Tables', url: '/data-tables'}
          ]},
          {icon: ' glyphicon-align-justify', name: '3 Level Menu', childMenus: [
            {name: 'Level 2 link', url: '/level-link'},
            {name: 'Gaode Map', url: '/gd-map'},
            {name: 'One more 2', url: '/level'}
          ]}
        ]
      }
    }
  },
  props: {
    left: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    triggerClick () {
      this.trigger.open = !this.trigger.open
      this.aside.toggled = !this.aside.toggled
    },
    openSearch () {
      this.openSearchStatus = true
    },
    switchSkin (color) {
      this.skin.currentStyle = color
    },
    showUserInfo () {
      this.asideMenu.settingShow = !this.asideMenu.settingShow
    }
  },
  watch: {
    checked () {
      if (this.checked) {
        this.show.triggerShow = false
        if (!this.trigger.open) {
          this.aside.toggled = true
        }
      } else {
        this.show.triggerShow = true
        if (!this.trigger.open) {
          this.aside.toggled = false
        }
      }
    },
    'aside.toggled' (val) {
      if (val) {
        this.left = true
      } else {
        this.left = false
      }
    }
  },
  components: {
    SiderTrigger,
    Switch,
    TopSearch,
    DropDown,
    InputSearch,
    Tree,
    VueScrollbar
  }
}
</script>